<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>行情</title>
	<!-- Fix for iOS Safari zooming bug -->
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta charset="utf-8" />
	<link href="./coinExchange.css" rel="stylesheet" type="text/css">

	<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
	<script src="./coinExchange.js"></script>
	<script src="./hybrid/html/pako.js"></script>
	<script src="./pako.js"></script>
	<!--封装了一个发布订阅模式-->
	<script src="./event.js"></script>
	<!--图表库js-->
	<script src="./charting_library/charting_library.min.js"></script>
	<!--websocket-->
	<script src="./websocket.js"></script>
	<!--图表数据获取-->
	<script src="./datafeed.js"></script>
	<!--图表配置-->
	<script src="./chartConfig.js"></script>
</head>
<style>
	.hide {
		display: none;
	}

	.buyColor {
		color: red;
	}

	.sellColor {
		color: green;
	}

	.main .container .exchange-cont .right .trade-cont ul li .focus-status {
		box-shadow: 0rem 0rem 0.2rem 0.02rem #1989fa;
		border-radius: 0.2rem;
		text-align: left;
	}

	.font_bold {
		font-weight: 550;
	}

	.time-sel {
		display: flex;
		justify-content: space-around;
		margin-top: 0.5rem;
	}

	.time-sel li {
		background: #f6f6f6;
		padding: 0.1rem 0.5rem;
		border-radius: 0.5rem;
		font-size: 0.5rem;
	}

	.time-sel .on {
		background: #2971BD;
		color: #fff;
	}
</style>
<style>
	* {
		padding: 0;
		margin: 0;
	}

	body {
		background-color: #181B2A;
	}

	/* 这个下面的css是 产品周期按钮的 */

	.header {
		position: relative;
		/* height: 25vh; */
		box-shadow: 0px 10px 8px #05111d;
	}

	.symbol {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		height: 100%;
	}

	.symbol span {
		width: 27%;
		height: 30px;
		margin-right: 2%;
		margin-bottom: 20px;
		line-height: 32px;
		text-align: center;
		background-color: #071724;
		color: #d2daed;
		border-radius: 4px;
		font-size: 14px;
	}

	.symbol span.active {
		color: #fff;
		font-weight: 500;
		background-color: #2971BD;
	}

	.times {
		position: absolute;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.times span {
		width: 16.66%;
		height: 30px;
		line-height: 30px;
		color: #7c8bac;
		font-size: 16px;
		text-align: center;
	}

	.times span.active {
		position: relative;
		color: #157fd5;
		font-weight: 500;
	}

	.times span.active:before {
		content: " ";
		position: absolute;
		bottom: -2px;
		left: 10%;
		z-index: 1;
		width: 80%;
		height: 3px;
		background-color: #157fd5;
		border-radius: 3px;
	}

	/* 	#tv_chart_container:before {
		content: " ";
		position: fixed;
		bottom: 22%;
		left: 5%;
		z-index: 999;
		width: 9vw;
		height: 9vw;
		background-color: #fff;
	} */
	/* 这个下面的css重点关注，和k线图与关 */

	#tv_chart_container {
		width: 100%;
		height: 50vh;
	}

	iframe {
		width: 100%;
		height: 100% !important;

	}

	.pane-legend-line.pane-legend-wrap.main.expand-line {
		padding-right: 5px;
	}
	.chart{
		margin-top: 3rem;
	}
</style>

<body>
	<div id="webView">

		<header class="sui-border-b">
			<h2>
				<div i18n="NCE1" style="color: #fff;text-align: center;">合约交易</div>
			</h2>
		</header>

		<div class="main" style="margin-top: 1rem;">
			<!-- <div class="header-title">
				<span i18n="NCE2">币币交易(WCF/USDT)</span>
			</div> -->
			<div class="header-cont" style="display: none;">
				<div class="left-cont">
					<div class="big green">11681.20</div>
					<div>≈80366.65CNY
						<span class="green">+0.56%</span>
					</div>
				</div>
				<div class="right-cont">
					<div class="hight"><span i18n="NCE3">高</span><span>117724.99</span></div>
					<div class="low"><span i18n="NCE4">低</span><span>115832.32</span></div>
					<div class="day">24H<span>15214.22</span></div>
				</div>
			</div>
			<div id="symbol" class="symbol">
				<span class="active" data-value="btcusdt">BTC/USDT</span>
				<span data-value="ethusdt">ETH/USDT</span>
				<span data-value="xrpusdt">XRP/USDT</span>

			</div>
			<!-- <div class="header-two">
		                <h4>币币交易(WCF/USDT)</h4>
		            </div> -->
			<ul class="coin-ul">
				<div class="divv">
					<div class="name" style="border-right: 1px solid;"><span i18n="NCE5">账户总权益USDT</span></div>
					<div class="price">0.2005</div>
				</div>
				<div class="divv" >
					<div class="name"><span i18n="NCE6">预估强平价USDT</span></div>
					<div class="price buyPrice">0.2005</div>
				</div>
				<div class="divv">
					<div class="name "><span i18n="NCE7"> 担保资产率</span></div>
					<div class="price sellPrice">0.2005</div>
				</div>
<!-- 				<div class="divv">
					<div class="name "><span i18n="NCE7">可用USDT</span></div>
					<div class="price sellPrice">1USDT</div>
				</div> -->

			</ul>
			<!-- <ul class="coin-ul">
				<div class="divv">
					<div class="name"><span i18n="NCE8">最高价</span></div>
					<div class="price">0.2005</div>
				</div>
				<div class="divv">
					<div class="name"><span i18n="NCE9">最低价</span></div>
					<div class="price">0.2005</div>
				</div>
				<div class="divv">
					<div class="name"><span i18n="NCE10">24H成交量</span></div>
					<div class="price">0.2005</div>
				</div>
			</ul> -->
			<div class="container">
				<div class="title">
					<div class="exchange active"><span i18n="NCE11">交易</span></div>
					<div class="market" i18n="NCE12">行情</div>
				</div>
				<div class="exchange-cont" style="font-size: 0.5rem;display: flex;">
					<div class="left" style="color: #FFF2CF;">
						<div style="width: 100%;">
							<!-- <thead class="buy-thead hide" style="display: block;">
								<tr>
									<th i18n="NCE13">类型</th>
									<th i18n="NCE14">价格</th>
									<th i18n="NCE15">数量</th>
								</tr>
							</thead> -->
							<!-- <tbody id="listView">
							</tbody> -->
							<div style="display: flex;justify-content: space-between;padding: 0 4%;color: #7c8bac;">
								<div>价格(USDT)</div>
								<div>数量(张)</div>
							</div>
							<div>
								<div style="display: flex;justify-content: space-between;padding: 0 4%;margin-top: 0.3rem;">
									<div style="color: tomato;">55340.1</div>
									<div style="color: slategrey;">65</div>
								</div>
								<div style="display: flex;justify-content: space-between;padding: 0 4%;margin-top: 0.3rem;">
									<div style="color: tomato;">55340.1</div>
									<div style="color: slategrey;">65</div>
								</div>
								<div style="display: flex;justify-content: space-between;padding: 0 4%;margin-top: 0.3rem;">
									<div style="color: tomato;">55340.1</div>
									<div style="color: slategrey;">65</div>
								</div>
								<div style="display: flex;justify-content: space-between;padding: 0 4%;margin-top: 0.3rem;">
									<div style="color: tomato;">55340.1</div>
									<div style="color: slategrey;">65</div>
								</div>
								<div style="display: flex;justify-content: space-between;padding: 0 4%;margin-top: 0.3rem;">
									<div style="color: tomato;">55340.1</div>
									<div style="color: slategrey;">65</div>
								</div>
								<div style="display: flex;justify-content: space-between;padding: 0 4%;margin-top: 0.3rem;">
									<div style="color: tomato;">55340.1</div>
									<div style="color: slategrey;">65</div>
								</div>
								
							</div>
							

							<script id="itemTpl" type="text/x-dot-template">
		                                <tr>
		                                    <td>
		                                        <span class="buyColor">
		                                            <span i18n="NCE17">
		                                                {{? it.lang=='cn'}}
		                                                买
		                                                {{??}}
		                                               buy
		                                                {{?}}  
		                                                
		                                             
		                                            
		                                            </span>({{= it.index}})
		                                        </span>
		                                    </td>
		                                    <td>{{= it.price}}</td>
		                                    <td>{{= it.num}}({{= it.peopleNum}}
		                                        {{? it.lang=='cn'}}
		                                        人
		                                        {{??}}
		                                        people
		                                        {{?}}  ) </td>
		                                </tr>
		                            </script>
						</div>

						<div style="width: 100%;">
							<!-- <thead class="sell-thead hide" style="display: block;">
								<tr>
									<th i18n="NCE13">类型</th>
									<th i18n="NCE14">价格</th>
									<th i18n="NCE15">数量</th>
								</tr>
							</thead>
							<tbody id="listView1">
							</tbody> -->
							<div style="display: flex;justify-content: space-between;padding: 0 4%;color: #7c8bac;">
								<div>价格(USDT)</div>
								<div>数量(张)</div>
							</div>
							<div>
								<div style="display: flex;justify-content: space-between;padding: 0 4%;margin-top: 0.3rem;">
									<div style="color: tomato;">55340.1</div>
									<div style="color: slategrey;">65</div>
								</div>
								<div style="display: flex;justify-content: space-between;padding: 0 4%;margin-top: 0.3rem;">
									<div style="color: tomato;">55340.1</div>
									<div style="color: slategrey;">65</div>
								</div>
								<div style="display: flex;justify-content: space-between;padding: 0 4%;margin-top: 0.3rem;">
									<div style="color: tomato;">55340.1</div>
									<div style="color: slategrey;">65</div>
								</div>
								<div style="display: flex;justify-content: space-between;padding: 0 4%;margin-top: 0.3rem;">
									<div style="color: tomato;">55340.1</div>
									<div style="color: slategrey;">65</div>
								</div>
								<div style="display: flex;justify-content: space-between;padding: 0 4%;margin-top: 0.3rem;">
									<div style="color: tomato;">55340.1</div>
									<div style="color: slategrey;">65</div>
								</div>
								<div style="display: flex;justify-content: space-between;padding: 0 4%;margin-top: 0.3rem;">
									<div style="color: tomato;">55340.1</div>
									<div style="color: slategrey;">65</div>
								</div>
							</div>
							

							<script id="itemTpl1" type="text/x-dot-template">
		                                <tr>
		                                    <td>
		                                        <span class="sellColor">
		                                            <span  i18n="NCE17">
		                                               
		                                                {{? it.lang=='cn'}}
		                                                卖
		                                                {{??}}
		                                               sell
		                                                {{?}}  
		                                            
		                                            </span>({{= it.index}})</span></td>
		                                    <td>{{= it.price}}</td>
		                                    <td>{{= it.num}}({{= it.peopleNum}}
		                                        
		                                        
		                                        {{? it.lang=='cn'}}
		                                                人
		                                                {{??}}
		                                                people
		                                                {{?}}  
		                                        
		                                        ) </td>
		                                </tr>
		                            </script>
						</div>
					</div>
					<div class="right">
<!-- 						<div class="indexBar">
							<div class="active buy" id="buy" i18n="NCE16">做多</div>
							<div class="sell" id="shou" i18n="NCE17">做空</div>
						</div> -->
						<div class="buy-cont trade-cont">
							<ul style="padding-left: 0.1rem;">
								<!-- <li>
									<div class="label" i18n="NCE18">最佳买价</div>
									<div class="value buyPrice buyColor defaultPrice">--</div>
								</li> -->
								<li style="margin: 0.4rem 0;">
									<div class="label" i18n="NCE19">做多价格</div>
									<input placeholder="" id="Buyprice" type="number" />
								</li>
								<!-- <li>
									<div class="label" i18n="NCE20">最大可买</div>
									<div class="value maxPrice">--</div>
								</li> -->
								<li>
									<div class="label" i18n="NCE21">做多数量</div>
									<input id="Buynum" type="number" />
								</li>
							</ul>
							<div class="fee-trade">
								<div class="fee">
									<div i18n="NCE22">手续费</div>
									<div class="buy_fee"><span class="font_bold">0.00</span> (3% USDT)</div>
								</div>
								<div class="trade">
									<div i18n="NCE23">交易额</div>
									<div class="buy-trade"><span class="font_bold"></span>USDT</div>
								</div>
							</div>
							<div class="btn" id="buySubmit">
								<button i18n="NCE24">做多</button>
							</div>
<!-- 							<div class="usdt-asset">
								<div class="use usdt"><span i18n="NCE25">可用</span><span class="value">1</span>USDT</div>
								<div class="all"><span i18n="NCE27">总计</span><span class="value"></span>USDT</div>
							</div> -->
						</div>

						<div class="sell-cont trade-cont">
							<ul style="padding-left: 0.1rem;">
<!-- 								<li>
									<div class="label" i18n="NCE28">最佳卖价</div>
									<div class="value sellPrice sellColor defaultPrice">--</div>
								</li> -->
								<li style="margin: 0.4rem 0;">
									<div class="label" i18n="NCE29">做空价格</div>
									<input id="Sellprice" type="number" />
								</li>
<!-- 								<li>
									<div class="label" i18n="NCE30">最大可卖</div>
									<div class="value maxPrice">--</div>
								</li> -->
								<li>
									<div class="label" i18n="NCE31">做空数量</div>
									<input id="Sellnum" type="number" />
								</li>
							</ul>
							<div class="fee-trade">
								<div class="fee">
									<div i18n="NCE22">手续费</div>
									<div class="value sell_fee"><span class="font_bold">0.00</span> (3% USDT)</div>
								</div>
								<div class="trade">
									<div i18n="NCE23">交易额</div>
									<div class="value trade-sell"><span class="font_bold"></span>USDT</div>
								</div>
<!-- 								<div class="trade">
									<div i18n="NCE39">所需币种总数</div>
									<div class="value sell_all_coin"><span class="font_bold"></span>USDT</div>
								</div> -->
							</div>
							<div class="btn" id="sellSubmit">
								<button i18n="NCE17">做空</button>
							</div>
<!-- 							<div class="usdt-asset">
								<div class="use usdt"><span i18n="NCE25">可用</span><span class="value"></span>WCF</div>
								<div class="freeze_usdt"><span i18n="NCE26">冻结</span><span class="value"></span>WCF
								</div>
								<div class="all"><span i18n="NCE27">总计</span><span class="value"></span>WCF</div>
							</div> -->
						</div>
					</div>
				</div>
				<div class="market-cont hide">
					<!-- <ul class="time-sel">
		                        <li data-type="3600" class="on">1 <span i18n="NCE32">小时</span></li>
		                        <li data-type="28800">8 <span i18n="NCE32">小时</span></li>
		                        <li data-type="86400">24 <span i18n="NCE32">小时</span></li>
		                        <li data-type="604800">1<span i18n="NCE38">周</span></li>
		                    </ul> -->
					<div class="header">
						
						<div class="times" id="interval">
							<span data-value="1">分时</span>
							<span class="active" data-value="5">5分钟</span>
							<!-- <span data-value="15">15分钟</span> -->
							<span data-value="30">30分钟</span>
							<span data-value="60">1小时</span>
							<span data-value="240">4小时</span>
							<span data-value="1D">日线</span>
						</div>
					</div>
					<div class="chart">
						<div id="tv_chart_container"></div>
					</div>
					<!-- <div class="line"  id="main">
		                    </div> -->
				</div>
			</div>

			<div class="mange-line">
				<div i18n="NCE33">我的持仓</div>
				<div class="manAdmin" data-href="my-entrust.html" i18n="NCE34">委托管理 > </div>
			</div>
			<div class="newOrder">
				<!-- <thead>
					<tr>
						<th i18n="NCE35">时间</th>
						<th i18n="NCE13">类型</th>
						<th i18n="NCE36">成交价格</th>
						<th i18n="NCE37">成交量</th>
						<th i18n="NCE27">总计</th>
					</tr>
				</thead> -->
				<tbody id="listView2">
				</tbody>

				<script id="itemTpl2" type="text/x-dot-template">
		                    <tr>
		
		                        <td>{{= it.create_time}}</td>
		                        <td>
		                            {{? it.is_order_type==1}}
		                            <span class="buyColor">
		                                {{? it.lang=='cn'}}
		                                做多
		                                {{??}}
		                                Buy
		                                {{?}}
		                            </span>
		                            {{?? it.is_order_type==2}}
		                            <span class="sellColor">
		                                
		                                {{? it.lang=='cn'}}
		                                做空
		                                {{??}}
		                                Sell
		                                {{?}}
		                            </span>
		                            {{?}}
		                        </td>
		                        <td>
		                            {{? it.is_order_type==1}}
		                            <span class="buyColor"> {{= it.buy_price}}</span>
		                            {{?? it.is_order_type==2}}
		                            <span class="sellColor"> {{= it.buy_price}}</span>
		                            {{?}}
		                           
		                        </td>
		                        <td>{{= it.buy_num}}</td>
		                        <td>{{= it.allUsdt}}</td>
		                    </tr>
		                </script>
			</div>
		</div>


		<!-- <footer>
		            <ul>
		                <li data-href="home.html"><span class="item tabbar1" i18n="Ntabbar1">首页</span></li>
		                <li><span data-href="line-wallet.html" class="item tabbar2" i18n="Ntabbar2">链钱包</span></li>
		                <li><span data-href="wcf.html" class="item tabbar3" i18n="Ntabbar3">WCF</span></li>
		                <li  class="active"><span data-href="coinExchange.html" class="item tabbar4" i18n="Ntabbar4">币币交易</span></li>
		                <li > <span data-href="my.html" class="item tabbar5" i18n="Ntabbar5">我的</span></li>
		            </ul>
		        </footer> -->


	</div>


	<!--页面总统js 初始化图表库 绑定点击事件等-->
	<script src="./index.js"></script>
	<!-- 拦截点击logo跳转 -->
	<script type="text/javascript">
		function plusReady() {
			var ws = plus.webview.currentWebview();
			ws.overrideUrlLoading({
				mode: 'reject'
			}, function (e) {
				console.log('拦截跳转 url: ' + e.url);
			})
		}
		document.addEventListener('plusready', plusReady, false);
	</script>
</body>

</html>